<script setup lang="ts">
import { defineProps,PropType,onMounted,defineEmits } from '@vue/runtime-core';
import {SheetItem} from './answer_sheet'
import { useRouter } from 'vue-router';

const props=defineProps({
    sheet:Array as PropType<Array<SheetItem>>,
    type:String,
})
const router=useRouter()
const emits=defineEmits(['question-selected'])

const sheet_item_clicked=(index:number)=>{
    console.log('sheet: select question:',index)
    router.push({
        name:'exam',
        params:{
            questions:props.sheet?.map(item=>item.question_id),
            start:+index,
        }
    })
}

</script>

<template>
  <div class="sheet-container">
      <section 
        class="sheet-item" 
        @click="sheet_item_clicked(index)" 
        v-for="(question,index) in sheet" 
        :key="question.question_id" 
        :class="{checked:question.checked,right:question.last_check_right,wrong:!question.last_check_right}">
          <p class="label">{{question.order+question.qtype}}</p>
          <p class="accuracy">{{(question.accuracy*100).toFixed(0)+'%'}}</p>
      </section>
  </div>
</template>

<style scoped lang="scss">
.sheet-container{
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.sheet-item{
    width: 50px;
    height: 50PX;
    border-radius: 5px;
    border: 1px solid gray;
    flex-grow: 0;
    flex-shrink: 0;
    p{
        color: aliceblue;
        font-size: 1rem;
        font-weight: 600;
        line-height: 25px;
        text-shadow: 1px 1px #000;
    }
    .label{
        background-color: gray;
    }
    &.checked.right{
        border-color: hsl(90, 100%, 40%);
        .label{
            background-color: hsl(90, 100%, 40%);
        }
    }
    &.checked.wrong{
        border-color: hsl(0,100%,40%);
        .label{
            background-color: hsl(0,100%,40%);
        }
    }
    &:hover{
        filter: brightness(1.2);
        transform: translateY(-5px) scale(1.2);
    }
}
</style>
